
function listRender(box, data){
  var str = "";
  for(var i=0;i<data.length;i++){
    str += `<div class="box" data-id="${data[i].id}">
              <img src="${data[i].imgs}" alt="">
              <p>${data[i].name}</p>
              <p>价格：${data[i].price}</p>
              <input type="button" class="addCart" value="加入购物车">
          </div>`
  }
  box.innerHTML = str;
}

export {listRender}




function cartRender(box, goods, cartData){
  // 准备渲染购物车
  let str = "";
  // 遍历总数据
  goods.forEach(val=>{
    // 遍历购物车数据
    cartData.forEach(val2=>{
      // 比对id
      if(val.id === val2.id){
        // 拼接页面结构
        str += `<tr data-id="${val.id}">
                  <td><input type="checkbox" class="check" ${val2.checked ? 'checked' : ''}></td>
                  <td><img src="${val.imgs}" alt=""></td>
                  <td>${val.name}</td>
                  <td><input type="number" value="${val2.num}" class="setNum"></td>
                  <td>${val.price}</td>
                  <td class="count">${val.price * val2.num}</td>
                  <td class="del">删除</td>
                </tr>`
      }
    })
  })
  // 放入指定容器
  box.innerHTML = str;
}
export {cartRender}
